<!DOCTYPE html>
<html>
<head>
    <title>Fields groups</title>
    <link rel="stylesheet" href="../../codebase/webix/webix.css" type="text/css" charset="utf-8">
    <script src="../../codebase/webix/webix.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="../../codebase//pivot.css" type="text/css" charset="utf-8">
    <script src="../../codebase/pivot.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" href="../common/samples.css" type="text/css" charset="utf-8">
    <script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div id="testA"></div>

<style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
</style>

<script type="text/javascript" charset="utf-8">
    var valueFields = {"balance":1,"gdp":1, "oil": 1};

    webix.ready(function(){
        webix.ui({
            container: "testA",
            height: 350,
            width: 1000,
            cols: [
                {
                    gravity: 2,
                    id: "pivot",
                    view: "pivot",
                    structure: {
                        rows: ["name"],
                        columns: ["year"],
                        values: [{name: "oil", operation: ["min", "sum"]}],
                        filters: [
                            {name: "continent", type: "select"},
                            {name: "form", type: "select"}
                        ]
                    },
                    popup:{
                        on:{
                            onShow: function(){
                                var fields = this.$$("fields");
                                // get tree data
                                var data = fields.serialize();
                                var treeData = [
                                    { id: "g1", name: "g1", text: "Number values", data:[], open: true},
                                    { id: "g2", name: "g2", text: "Text values", data:[], open: true}
                                ];
                                for(var i = 0; i < data.length; i++)
                                    treeData[valueFields[data[i].text] ? 0 : 1].data.push(data[i]);
                                fields.clearAll();
                                fields.parse(treeData);
                                // block branch drag
                                fields.attachEvent("onBeforeDrag", function(context){
                                    return !this.getItem(context.start).$count;
                                });
                                // block drag-n-drop within Tree
                                fields.attachEvent("onBeforeDragIn", function(context){
                                    return context.from != context.to;
                                });
                            },
                            onViewInit: function(name, config){
                                if(name == "fields"){
                                    // tree instead of list
                                    config.view = "tree";
                                    delete config.template;
                                    config.type = {
                                        marker: function(item){
                                            return item.$count?"":"<span class='webix_pivot_list_marker'></span>";
                                        },
                                        templateCommon:webix.template("{common.icon()} {common.marker()} <span>#text#</span>")
                                    };
                                }
                            }
                        }
                    }
                }
            ]
        });
        $$("pivot").parse(pivot_dataset);
    });
</script>
</body>
</html>